<template>
  <div class="messageList flex-column" ref="messageList">
    <div class="chatOperate flex-column">
      <div class="chat-filter">
        <el-dropdown placement="top-start"  @command="index=>{typeIndex=index;messageListType=types[index].type} ">
          <span class="el-dropdown-link">
            {{types[typeIndex].text}}<i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item :command="index" v-for="(item, index) in types" :key="index">{{item.text}}</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <img src="../../assets/images/refuse.png" class="refuseChat" width="15px" height="15px" alt="">
      </div>
      <el-input
        class="chat-filter-input"
        placeholder="查找用户/群"
        v-model="messageListFilter"
        size="mini"
        prefix-icon="el-icon-search"
        clearable>
      </el-input>
    
    </div>
    <ul class="scrollAuto autoGrow">
      <div v-for="(item) in list" :key="item.id">
        <chat-list-item
          v-contextmenu="item.contextmenu"
          @contextmenuclick="contextmenuclick(item,$event)"
          :chatid="item.id"
          :chat="item"
          :showLastMessage="true">
          <template v-slot:attachInfo><i class="layui-icon layui-icon-close deleteMessage" @click.stop="removeMessage(item)"></i></template>  
        </chat-list-item>
        <div style="height:1px;background-color:#ddd;margin:0 10px" />
      </div>
      
    </ul>
    <!-- <div class="dragLine"></div>
    <i :class="['toggleList', 'layui-icon', 'layui-icon-triangle-r',showServiceList && 'showList']"
      @click="toggleServiceList">
    </i> -->
  </div>
</template>
<script>
import { mapState, mapActions, mapMutations } from 'vuex';
import ChatListItem from '@/components/chatListItem';
import pinyin from '@/lib/pinyin'
import {getAccountid,getChatid} from '@/lib/data-translate'

export default {
  name: 'messageList',
  components: {
    ChatListItem
  },
  data() {
    return {
      messageListType: 'all',
      messageListFilter: '',
      dragData: {
        x: 0,
        start: false,
        width: 180,
      },
      typeIndex:0,
      types:[
        {
          type:'all',
          text:'全部消息列表'
        },
        {
          type:'user',
          text:'好友消息列表'
        },
        {
          type:'group',
          text:'群消息列表'
        }
      ],
      
    }
  },
  mounted() {
     
  },
  props: ['showServiceList'],
  computed: {
    ...mapState(['messages', 'currentUser','chatMap','chatListMap','uistate','accountMap']),
    list(){
      let list = this.chatListMap[this.uistate.accountid]||[]
      list = list.map(id=> {
        let _chat = this.chatMap[id]
        _chat.contextmenu = [ {label:_chat.isTop==2?'取消置顶':'置顶',value:'top'}, {}, {label:'关闭',value:1} ]
        if(_chat.friendwxid.includes('@chatroom')){
          _chat.contextmenu = [{label:'关闭',value:1} ]
        }
        return _chat
      } )
      const filerchats = pinyin.getFullChars(this.messageListFilter).toLocaleLowerCase()
      if(this.messageListType === 'user'){
        list = list.filter( item=>!item.id.toString().endsWith('@chatroom') &&item.chars.indexOf(filerchats)>-1  ) 
      }else if(this.messageListType === 'group'){
        list = list.filter( item=>item.id.toString().endsWith('@chatroom')&&item.chars.indexOf(filerchats)>-1 ) 
      }else{
        list = list.filter( item=> item.chars.indexOf(filerchats)>-1 ) 
      }
      
      return list.sort((a,b)=>{
        
        if( b.isTop ===2){
          return 1
        }else if(a.isTop ===2){
          return -1
        }else{
          return 0
        }
         
        // b.isTop-a.isTop
      })
    }
  },
  watch: {
    'uistate.accountid'(val,oldval){
      if(val!=oldval && val!=-1 ){
        this.messageListFilter = ''  
        this.typeIndex = 0
      }

    }
  },
  methods: {
    ...mapActions(['removeChatList','setVIP']),
    ...mapMutations(['removeChatListMap']),
    clearList() {
      this.messageListFilter = ''
    },
    removeMessage(item){
      this.removeChatList({id:item.id})
    },
    contextmenuclick(item,e){
      console.log(e.value)
      if(+e.value===1)this.removeChatList({id:item.id})
      if(e.value==='top')this.changeUserVip(item)
    },
    changeUserVip(item) {
      const { csid,wxaccount,friendwxid,isTop } = item
      const accountid = getAccountid(this.accountMap,csid,wxaccount)
      const chatid = getChatid(csid,accountid,friendwxid)
      const params = {type:friendwxid.includes('@chatroom')?1:0 ,chatid,csId:csid, wxAccount:wxaccount, friendAccount:friendwxid,isTop:isTop===1?2:1}
      this.setVIP(params)
      
    },

    toggleServiceList() {
      this.$emit('toggleServiceList')
    },
    
    changeMessageListType({value}){
      this.messageListType = value;
    },
     
  }
}
</script>
<style scoped>
.chat-filter{
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100%;
  justify-content: space-between;
  padding: 0 5px;
  box-sizing: border-box;
}
.chat-filter-input{
  margin-top: 10px;
}
.serviceContainer .messageList{
  background-color: transparent
}
.listItem{
  padding: 0 10px; 
}
.serviceContainer .messageList .chatOperate{
  margin: 10px;
  padding: 0;
  height: auto;
  
} 
.serviceContainer .messageList .chatSearch{
  border: none 
}
.serviceContainer .messageList .chatTitle{
  padding:0 10px;
  justify-content: space-between;
}
.clear{
  width: 30px;
  height: 30px;
  justify-content: center;
  align-items: center;
}
.clear .layui-icon{
  font-size: 20px;
  color: #999
} 
</style>
